<template>
  <view>
    <view>
      <u-form :model="form" ref="uForm" style="margin: 0 20rpx;">
        <u-form-item label-width="165"  label="*习题标题" prop="title"><u-input v-model="form.title" /></u-form-item>
        <u-form-item label-width="145" label="*开始时间" prop="beginTime">
          <u-input :selectOpen="show && isBegin" type="select" placeholder="请选择" v-model="form.beginTime" @click="beginDateTime" />
        </u-form-item>
        <u-form-item label-width="145" label="*结束时间" prop="endTime">
          <u-input :selectOpen="show && !isBegin" type="select"  placeholder="请选择" v-model="form.endTime" @click="endDateTime"  />
        </u-form-item>
      </u-form>
      <view style="text-align: center;margin-top: 20rpx;">
        <u-button size="medium" shape="circle" type="primary" @click="submit" :ripple="true" ripple-bg-color="#a0cfff">提交</u-button>
      </view>
    </view>
    <u-picker mode="time" v-model="show" :params="params" @confirm="confirm" @cancel="show = false"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      show: false,
      isBegin: false,
      form: {
        courseId: '',
        title: "Java面向对象",
        beginTime: "2020-11-21 15:27:28",
        endTime: "2020-11-21 15:27:28",
      },
      rules: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ],
        beginTime: [
          {
            required: true,
            message: '开始时间不能为空',
            trigger: 'blur'
          }
        ],
        endTime: [
          {
            required: true,
            message: '结束时间不能为空',
            trigger: 'blur'
          }
        ],
      }
    }
  },
  onLoad(e) {
    this.form.courseId = e.courseId;
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.$u.api.saveExerciseTitle(this.form).then(res => {
            if (res.code === 200){
              uni.$emit("exerciseTitle");
              // #ifndef H5
              uni.navigateBack({
                delta: 1
              })
              // #endif
              // #ifdef H5
              history.back();
              // #endif
            }
          })
        }
      })
    },
    confirm(v){
      if(v !== null && v !== undefined){
        let datetime = v.year + "-" + v.month + "-" + v.day + " " + v.hour + ":" + v.minute + ":" + v.second;
        if(this.isBegin){
          this.form.beginTime = datetime;
        }else {
          this.form.endTime = datetime;
        }
      }
    },
    beginDateTime(){
      this.isBegin = true;
      this.show = true;
    },
    endDateTime(){
      this.isBegin = false;
      this.show = true;
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  filters:{

  }
}
</script>

<style>

</style>
